<template>
    <div>
        <grid :show-lr-borders="false" :show-vertical-dividers="false">
            <grid-item @on-item-click="onItemClick1">
                <img slot="icon" src="@/assets/imgs/icon7.png">
                <span slot="label">一站式硬件制造平台</span>
            </grid-item>
            <grid-item @on-item-click="onItemClick2">
                <img slot="icon" src="@/assets/imgs/icon1.png">
                <span slot="label">基础服务</span>
            </grid-item>
            <grid-item @on-item-click="onItemClick3">
                <img slot="icon" src="@/assets/imgs/icon10.png">
                <span slot="label">增值服务</span>
            </grid-item>
        </grid>

        <div class="one">
            
              <p class="title">一站式硬件制造平台</p>
        </div>
        <div class="two">
            <p class="title">基础服务</p>
            <ul>
                <li>
                    <span>SMT贴片：</span><p>SMT、DIP</p> </li>
                <li>
                    <span>物料供应链服务：</span><p>电子元器件，芯片，PCB，代采</p> </li>
                <li>
                    <span>电子制造、CBA：</span><p>PCBA，组装，测试，OEM/ODM，ICT测试,FCT测试，老计测试</p> </li>
            </ul>
        </div>
        <div class="there">
            <p class="title">增值服务</p>
            <ul>
                <li>
                    <span>NPI服务：</span>SMT、DIP </li>
                <li>
                    <span>电路设计解决方案服务：</span>电子元器件，芯片，PCB，代采 </li>
                <li>
                    <span>人才服务：</span>PCBA，组装，测试，OEM/ODM，ICT测试,FCT测试，老计测试 </li>
                <li>
                    <span>制造咨询服务:</span>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import { Grid, GridItem, GroupTitle } from "vux";

export default {
  components: {
    Grid,
    GridItem,
    GroupTitle
  },
  mounted() {
      this.onItemClick1();
  },
  methods: {
    onItemClick1() {
      document.querySelector(".one").setAttribute("style", "display:block");
      document.querySelector(".two").setAttribute("style", "display:none");
      document.querySelector(".there").setAttribute("style", "display:none");
    },
    onItemClick2() {
      document.querySelector(".one").setAttribute("style", "display:none");
      document.querySelector(".two").setAttribute("style", "display:block");
      document.querySelector(".there").setAttribute("style", "display:none");
    },
    onItemClick3() {
      document.querySelector(".one").setAttribute("style", "display:none");
      document.querySelector(".two").setAttribute("style", "display:none");
      document.querySelector(".there").setAttribute("style", "display:block");
    }
  }
};
</script>


<style scoped>
.one,.two,.there{
    padding: 0 20px;
}
.title{
text-align: center;
}
.one .title{
    margin-top: 100px;
}
ul li{
    list-style: none;
}
ul li span{
    font-size: 14px;
}
ul li p{
    font-size: 12px;
    color: rgb(155, 157, 160);
    padding-left: 50px;
}
</style>
